<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>resume</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>


<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend id="sessionId" ></legend>
        </fieldset>
        <button class="layui-btn layui-btn-sm" lay-event="addUser">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<div class="layui-row"  id="popUpdateTest" style="display:none;">
    <form class="layui-form layui-from-pane" lay-filter="formData" action="resume/saveAndUpdate" method="post" style="margin-top: 20px;">

        <div class="layui-form-item" lay-filter="nameForm">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input name="id" id="id" type="hidden">
                    <input type="text" id="name" name="name" lay-verify="required|name" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <input type="text" id="address" name="address" lay-verify="required|address" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./layui/jquery-3.5.1.min.js" charset="utf-8"></script>

<script th:inline="none">

    layui.use(['table', 'form'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table;

        table.render({
            elem: '#test',
            url: 'resume/list',
            toolbar: '#toolbarDemo',
            cols: [[
                {field: 'id', title: 'id'},
                {field: 'name', title: '姓名'},
                {field: 'address', title: '地址'},
                {field: 'phone', title: '电话'},
                {field: 'right', title: '操作', toolbar: '#barDemo'},
            ]],
        });


        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event == 'addUser') {
                var data = checkStatus.data;
                layer.open({
                    type: 1,
                    title: '添加用户',
                    maxmin: true,
                    area: ['460px', '300px'],
                    shadeClose: false, //点击遮罩关闭
                    content: $("#popUpdateTest").html()
                });
            }
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;

            //回填数据到表单
            form.val("formData", {
                "id": data.id
                , "name": data.name
                , "address": data.address
                , "phone": data.phone
            });


            if (obj.event === 'del') {
                layer.confirm('真的删除 ['+data.name+'] 么', function (index) {
                    $.ajax({
                        type: "delete",
                        url: 'resume/deleteById/'+data.id,
                        datatype: "json",
                        success: function (resp) {
                            if (resp.code == 200) {
                                layer.msg("删除成功", {icon: 6});
                                //刷新数据
                                //$(".layui-laypage-btn").click();
                                table.reload('test');
                                $.ajax({
                                    type: "get",
                                    url: 'getSessionId',
                                    datatype: "json",
                                    success: function (resp) {
                                        debugger
                                        $("#sessionId").html(resp);
                                    }
                                })
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    title: '编辑用户',
                    maxmin: true,
                    area: ['460px', '300px'],
                    shadeClose: false, //点击遮罩关闭
                    content: $("#popUpdateTest")
                });
            }
        });

        //获取sessionid
        $.ajax({
            type: "get",
            url: 'getSessionId',
            datatype: "json",
            success: function (resp) {
                debugger
                $("#sessionId").html(resp);
            }
        })
    });

</script>
</body>
</html>